<template>
  <div>
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <div style="margin-top: 15px;">
              <el-form-item label="大单位重量">
                <el-input v-model="ruleForm.input" placeholder="请输入内容">
                  <template slot="append">KG</template>
                </el-input>
              </el-form-item>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <div style="margin-top: 15px;">
              <el-form-item label="小单位重量">
                <el-input v-model="ruleForm.input" placeholder="请输入内容">
                  <template slot="append">KG</template>
                </el-input>
              </el-form-item>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <div style="margin-top: 15px;">
              <el-form-item label="大单位长度">
                <el-input v-model="ruleForm.input" placeholder="请输入内容">
                  <template slot="append">mm</template>
                </el-input>
              </el-form-item>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <div style="margin-top: 15px;">
              <el-form-item label="小单位宽度">
                <el-input v-model="ruleForm.input" placeholder="请输入内容">
                  <template slot="append">mm</template>
                </el-input>
              </el-form-item>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <div style="margin-top: 15px;">
              <el-form-item label="大单位高度">
                <el-input v-model="ruleForm.input" placeholder="请输入内容">
                  <template slot="append">mm</template>
                </el-input>
              </el-form-item>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <div style="margin-top: 15px;">
              <el-form-item label="临期预警">
                <el-input v-model="ruleForm.input" placeholder="请输入内容">
                  <template slot="append">KG</template>
                </el-input>
              </el-form-item>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <div style="margin-top: 15px;">
              <el-form-item label="临期禁出">
                <el-input v-model="ruleForm.input" placeholder="请输入内容">
                  <template slot="append">KG</template>
                </el-input>
              </el-form-item>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="效期管理方式" label-width="100" prop="name">
              <el-select v-model="ruleForm.value" clearable placeholder="请选择" style="width:84%">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <div style="margin-top: 15px;">
              <el-form-item label="补货阈值">
                <el-input v-model="ruleForm.input" placeholder="请输入内容">
                  <template slot="append">KG</template>
                </el-input>
              </el-form-item>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <div style="margin-top: 15px;">
              <el-form-item label="补货阈值(网点)" label-width="130">
                <el-input v-model="ruleForm.input" placeholder="请输入内容" style="width:82%">
                  <template slot="append">KG</template>
                </el-input>
              </el-form-item>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { regionDataPlus } from 'element-china-area-data'
export default {
  data() {
    return {
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        value: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        date1: [
          {
            type: 'date',
            required: true,
            message: '请选择日期',
            trigger: 'change'
          }
        ],
        date2: [
          {
            type: 'date',
            required: true,
            message: '请选择时间',
            trigger: 'change'
          }
        ],
        type: [
          {
            type: 'array',
            required: true,
            message: '请至少选择一个活动性质',
            trigger: 'change'
          }
        ],
        resource: [
          { required: true, message: '请选择活动资源', trigger: 'change' }
        ],
        desc: [{ required: true, message: '请填写活动形式', trigger: 'blur' }]
      },
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      value: ''
    }
  }
}
</script>
